<template>
  <view>
    <view class="popup">
      <view class="popup-top">
        <view class="public" style="border-bottom: 1px solid #EBEBEB;">
          <view class="left">
            <image src="/static/images/service/phone.png" class="icon"></image>
            陪诊客服
          </view>
          <text class="phone" @tap="phone">{{phoneNum}}</text>
        </view>
        <view class="public">
          <view class="left">
            <image src="/static/images/service/wechat.png" class="icon"></image>
            在线客服
          </view>
          <view>
            <!-- #ifdef MP-WEIXIN -->
            <button @contact="sendMessage" type="default" open-type="contact">在线联系</button>
            <!-- #endif -->
          </view>
        </view>
      </view>
      <view class="cancel" @tap="closePop">
        取消
      </view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    ref,
    onMounted,
    defineEmits
  } from 'vue';

  const phoneNum = ref(null)
  onMounted(async() => {
    phoneNum.value = await fetchParam('xingyue.kefu.phone')
  })

  const serviceShow = ref(false)
  //传值给父
  const emit = defineEmits(['closePop']); // 定义可以触发的自定义事件

function closePop(){
   emit('closePop'); // 触发事件并传递值  
}


  async function phone() {
    uni.makePhoneCall({
      phoneNumber: phoneNum.value 
    });
  }

  function sendMessage(e) {
    console.log(e);
  }
  async function fetchParam(key) {
    const result = await http.getRequest("/peizhen/config/get-value-by-key", {
      key
    })
    if (result.code == 0) {
      return result.data
    } else {
      uni.showToast({
        title: '获取电话失败',
        icon: 'error',
        duration: 1000
      })
    }
  }
</script>

<style lang="scss">
  .popup {
    padding: 30rpx;
    .popup-top {
      width: 100%;
      height: 261rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 0 30rpx;

      .public {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 43rpx 0;
        box-sizing: border-box;
        font-size: 30rpx;
        font-weight: bold;

        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;

          image {
            width: 44rpx;
            height: 44rpx;
            margin-right: 30rpx;
          }

          .phone {
            color: #55B5FF;
          }
        }

        button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 178rpx;
          height: 60rpx;
          background: #22b9a3;
          border-radius: 12rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
    }

    .cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 96rpx;
      background: #FFFFFF;
      border-radius: 48rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 30rpx;
    }
  }
</style>